<template>
  <div class="bg">
    <!-- 顶部标题 -->
    <div class="top">
      <p class="top-text">充值申请</p>
    </div>
    <!-- 搜索栏 -->
    <div class="search">
      <div class="block">
        <el-date-picker
          v-model="timears"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="search-button">
        <el-button type="primary" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-style="{ border: '0.5px solid #e6e6e6' }"
        :header-cell-style="header"
        fit
      >
        <el-table-column
          type="selection"
          width="39"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="alternations_amount"
          label="充值金额"
          width="167"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="a" label="转账卡号" width="250" align="center">
        </el-table-column>
        <el-table-column prop="b" label="系统银行" width="200" align="center">
        </el-table-column>
        <el-table-column prop="c" label="系统卡号" width="250" align="center">
        </el-table-column>
        <el-table-column
          prop="order_number"
          label="系统收款人"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column label="充值时间" width="284" align="center">
          <template slot-scope="scope">
            <span> {{ $timer(scope.row.creat_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="d" label="状态" width="160" align="center">
        </el-table-column>
        <el-table-column label="操作" width="130" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row), (dialogVisible = true)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>

    <!-- 查看弹窗 -->
    <el-dialog
      title="充值申请详细信息"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div class="popup">
        <div class="top">
          <p class="top-text">平台信息</p>
        </div>
        <div class="button">
          <el-input placeholder="暂无" readonly v-model="input1.a">
            <template slot="prepend">&emsp;充值金额:</template>
          </el-input>
          <el-input placeholder="暂无" readonly v-model="input1.b">
            <template slot="prepend">&emsp;转账卡号:</template>
          </el-input>
          <el-input placeholder="暂无" readonly v-model="input1.c">
            <template slot="prepend">&emsp;系统银行:</template>
          </el-input>
          <el-input placeholder="暂无" readonly v-model="input1.d">
            <template slot="prepend">&emsp;系统卡号:</template>
          </el-input>
          <el-input placeholder="暂无" readonly v-model="input1.e">
            <template slot="prepend">系统收款人:</template>
          </el-input>
          <el-input placeholder="暂无" readonly v-model="input1.f">
            <template slot="prepend">&emsp;充值时间:</template>
          </el-input>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      timears: " ",
      currentPage1: 1,
      dialogVisible: false,
      input1: {
        a: "",
        b: "",
        c: "",
        d: "",
        e: "",
        f: "",
      },
      count:0,
      limit:10,
      page:1, 
      vall:10   
      };
  },
  methods: {
    handleDelete(row) {
      this.input1.a = row.alternations_amount;
      this.input1.b = row.a;
      this.input1.c = row.b;
      this.input1.d = row.c;
      this.input1.e = row.order_number;
      this.input1.f = this.$timer(row.creat_time)
    },
    handleSizeChange(val) {
      this.vall = val
        this.$axios({
      url: "/queryRechargeApplication",
      method: "POST",
      data: {
        currentPage: this.vall,
        pageSize: this.page,
      },
    })
      .then((response) => {
        this.tableData = response.data.data;
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].a = "5465481146241951";
          this.tableData[i].b = "建设银行";
          this.tableData[i].c = "3115487946225951";
          this.tableData[i].d = "审核成功";
        }
        console.log(this.tableData);
      })
      .catch((error) => {
        console.log(error);
      });
    },
    handleCurrentChange(val) {
       this.$axios({
      url: "/queryRechargeApplication",
      method: "POST",
      data: {
        currentPage: val,
        pageSize: this.vall,
      },
    })
      .then((response) => {
        this.tableData = response.data.data;
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].a = "5465481146241951";
          this.tableData[i].b = "建设银行";
          this.tableData[i].c = "3115487946225951";
          this.tableData[i].d = "审核成功";
        }
        console.log(this.tableData);
      })
      .catch((error) => {
        console.log(error);
      });
    },
    header() {
      return {
        background: "rgba(242,242,242)",
        border: "0.5px solid #e6e6e6",
      };
    },
    search() {
      this.$axios({
        url: "/queryRecharge",
        method: "GET",
        params: {
          creat_time: this.timears[0],
          currentPage: this.page,
          operating_time: this.timears[1],
          pageSize: this.limit,
        },
      })
        .then((response) => {

          this.tableData = response.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mounted() {
    // 表格数据
    this.$axios({
      url: "/queryRechargeApplication",
      method: "POST",
      data: {
        currentPage: 1,
        pageSize: 1,
      },
    })
      .then((response) => {
        this.count = response.data.count
        this.tableData = response.data.data;
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].a = "5465481146241951";
          this.tableData[i].b = "建设银行";
          this.tableData[i].c = "3115487946225951";
          this.tableData[i].d = "审核成功";
        }
        console.log(this.tableData);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

<style lang="scss" scoped>
template {
  padding: 15px;
}
// 顶部标题
.bg {
  background-color: white;
}
.top {
  padding: 15px 0;
  border-bottom: 2px solid #f6f6f6;
}
.top-text {
  font-size: 14px;
  padding: 0 15px;
}
// 搜索栏
.search {
  padding: 20px 0 0 7.5px;
  display: flex;
}
.search-button {
  padding-left: 15px;
}

// 表格
.table {
  margin: 20px 0;
  padding: 7.5px;
}

// 弹窗
// .popup {
//   background: #f2f2f2;
//   height: 180px;
// }
.button {
  padding-left: 7.5px;
  padding-right: 7.5px;
}
// 分页
.footer {
  padding: 0 7.5px 50px 7.5px;
}
</style>